<template>
  <div id="APP">
    <van-tabbar v-model="active">
      <van-tabbar-item>
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active-a ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      active: 0,
      icon: {
        active: require('./assets/img/luyou-a.png'),
        inactive: require('./assets/img/luyou-a.png'),
      },
    };
  },
  components: {
    
  }
}
</script>

<style>

</style>
